<script setup>
import useComplexFormStore from '@/store/modules/complexForm';
import { computed, ref } from 'vue';
import { listForm, getForm, delForm, addForm, updateForm, commitForm, refuseForm, download } from "@/api/complex/form";
import { ElMessage } from 'element-plus';
import { listDirectory } from "@/api/complex/directory";

const complexStore = useComplexFormStore();
const directoryList = ref([]);
const queryParams = ref({
  directoryName: null,
  remark: null
})
const { proxy } = getCurrentInstance();
const total = ref(0);
const data = ref(JSON.parse(sessionStorage.getItem('formInfo')));

const loading = ref(false)
const activeDirectory = ref()
const itemList = ref(JSON.parse(data.value.scoreJson));


function getList() {
  loading.value = true;
  listDirectory(queryParams.value).then(response => {
    directoryList.value = proxy.handleTree(response.data, "directoryId", "parentId");
    console.log(directoryList.value)
    loading.value = false;
  });
}
getList();



function handleNodeClick(data) {
  if (data.children != null || data.children != undefined) {
    activeDirectory.value = null
    return;
  }
  activeDirectory.value = data;
  console.log(data);
  console.log(showData.value)
};

const showData = computed(() => {
  if (activeDirectory.value == null) {
    let dataArray = JSON.parse(data.value.scoreJson)
    for (let index = 0; index < dataArray.length; index++) {
      let item = dataArray[index];
      item.total = item.addTimes * item.itemScore;
    }
    return dataArray;
  }
  let dataArray = JSON.parse(data.value.scoreJson).filter(item => {
    if (item.directoryId == activeDirectory.value.directoryId) {
      return true;
    }
  })
  for (let index = 0; index < dataArray.length; index++) {
    let item = dataArray[index];
    item.total = item.addTimes * item.itemScore;
  }
  return dataArray;
})

const defaultProps = {
  children: 'children',
  label: 'label',
}

function commit() {
  commitForm({ scoreId: data.value.scoreId }).then(res => {
    if (res.msg === '操作成功') {
      ElMessage({
        type: 'success',
        message: '通过成功',
        showClose: true
      })
    } else {
      ElMessage({
        type: 'error',
        message: res.msg,
        showClose: true
      })
    }
  })
}

function refuse() {
  refuseForm({ scoreId: data.value.scoreId }).then(res => {
    if (res.msg === '操作成功') {
      ElMessage({
        type: 'success',
        message: '成功打回',
        showClose: true
      })
    } else {
      ElMessage({
        type: 'error',
        message: res.msg,
        showClose: true
      })
    }
  })
}

function handleDownLoad(data) {
  // console.log(data)
  // download(data.fileUrl)
  const baseUrl = import.meta.env.VITE_APP_BASE_API;
  const a = document.createElement('a');
  a.setAttribute('download', data.fileName);
  a.setAttribute('target', '_blank');
  a.setAttribute('href', baseUrl + data.fileUrl);
  a.click();
}
console.log(JSON.parse(data.value.scoreJson))

</script>
<template>
  <div class="contain">
    <div class="head-btn">
      <el-col :span="1.5">
        <el-button type="success" plain icon="Edit" v-hasPermi="['complex:form:commit']" @click="commit">通过</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="Delete" v-hasPermi="['complex:form:refuse']" @click="refuse">拒绝</el-button>
      </el-col>
    </div>
    <div class="body">
      <div class="nav">
        <div>目录导航</div>
        <el-tree :data="directoryList" :props="{ label: 'directoryName', children: 'children' }"
          :expand-on-click-node="false" node-key="id" highlight-current default-expand-all
          @node-click="handleNodeClick" />
      </div>
      <div class="table">
        <el-row :gutter="10" class="mb8">
          <el-descriptions title="学生信息" :column="2" border>
            <el-description-item>
              <template #label>
                <div class="cell-item">
                  <el-icon :style="iconStyle">
                    <user />
                  </el-icon>
                  学号
                </div>
              </template>
              {{ data.studentNumber }}
            </el-description-item>
          </el-descriptions>
          <el-col :span="1.5">
          </el-col>
        </el-row>
        <div class="biaoge">
          <el-table v-loading="loading" :data="showData">
            <el-table-column label="项目名称" align="center" prop="itemDescription" />
            <el-table-column label="项目分数" align="center" prop="itemScore" />
            <el-table-column label="添加次数" prop="addTimes" />
            <el-table-column label="条目总分" prop="total" />
            <el-table-column label="顶层目录" align="center" prop="ancestorName" />
            <el-table-column label="作证材料" align="center">
              <template #default="scope">
                <el-button link type="primary" icon="Download" @click="handleDownLoad(scope.row)"
                  v-hasPermi="['complex:form:edit']">
                  {{ scope.row.fileName }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>



<style lang="scss" scoped>
.contain {
  margin-top: 20px;
  margin-left: 10px;

}

.biaoge {
  width: 100%;
  margin-top: 32px;
  float: right;
}

.nav {
  margin-bottom: 10px;
  margin-top: 10px;
  width: 240px;
}

.head-btn {
  display: flex;
  justify-content: space-around;
}

.body {
  display: flex;
  margin-top: 18px;
}

.table {
  width: calc(100% - 240px);
}
</style>